var BallView = Class.extend({
	ball : null, // Ball
	
	el   : null, // jQuery element
	
	init: function(ball)
	{
		this.ball = ball;
		
		this.el = $('<div class="ball" />');
		$("body").append(this.el);
		
		this.el.css({
			width  : (this.ball.r * 2) + "px",
			height : (this.ball.r * 2) + "px",
			
			"-webkit-border-radius" : this.ball.r + "px"
		});
		
		this.updatePosition();
		
		$("body").keydown(this.onKeyDown.inScope(this));
		$("body").keyup  (this.onKeyUp  .inScope(this));
	},
	
	updatePosition: function()
	{
		this.el.css({
			left	: this.ball.x - this.ball.r,
			top		: this.ball.y - this.ball.r
		});
	},
	
	onKeyDown: function(event)
	{
		
		var key = event.keyCode;
		
		if (key == 38)
			this.ball.accelY = -1;
		if (key == 40)
			this.ball.accelY = 1;
		if (key == 37)
			this.ball.accelX = -1;
		if (key == 39)
			this.ball.accelX = 1;
		
	},
	onKeyUp: function(event)
	{
		var key = event.keyCode;
		
		if (key == 38)
			this.ball.accelY = 0;
		if (key == 40)
			this.ball.accelY = 0;
		if (key == 37)
			this.ball.accelX = 0;
		if (key == 39)
			this.ball.accelX = 0;
	
	
	}
});
